import React, {Component} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {Table, Button, Space,DatePicker,Input } from 'antd';

const { RangePicker } = DatePicker;
const { TextArea } = Input;

const onChange = e => {
  console.log(e);
};
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park',
  },
];
class SystemLog extends React.Component {
  state = {
    filteredInfo: null,
    sortedInfo: null,
  };
  handleChange = (pagination, filters, sorter) => {
    console.log('Various parameters', pagination, filters, sorter);
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter,
    });
  };

  clearFilters = () => {
    this.setState({filteredInfo: null});
  };

  clearAll = () => {
    this.setState({
      filteredInfo: null,
      sortedInfo: null,
    });
  };
  setAgeSort = () => {
    this.setState({
      sortedInfo: {
        order: 'descend',
        columnKey: 'age',
      },
    });
  };
  render() {
    let {sortedInfo, filteredInfo} = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = [
      {
        title: 'id',
        dataIndex: 'name',
        key: 'name',
        align:'center'
      },
      {
        title:'ID/名称',
        dataIndex: 'ID',
        key:'ID',
        align:'center'
      },
      {
        title:'链接',
        dataIndex: 'ID',
        key:'ID',
        align:'center'
      },
      {
        title:'行为',
        dataIndex: 'ID',
        key:'ID',
        align:'center'
      },
      {
        title:'操作ip',
        dataIndex: 'ID',
        key:'ID',
        align:'center'
      },
      {
        title: '类型',
        dataIndex: 'age',
        key: 'age',
        align:'center'
      },
      {
        title: '操作时间',
        dataIndex: 'address',
        key: 'address',
        align:'center'
      },
    ];
    return (
      <PageContainer
        header={{
          title: '系统日志',
          breadcrumb: {},
        }}
      >
        <Space style={{marginBottom: 16}}>
          <Button onClick={this.setAgeSort}>全部</Button>
          <Button onClick={this.clearFilters}>今天</Button>
          <Button onClick={this.clearAll}>昨天</Button>
          <Button onClick={this.clearAll}>最近7天</Button>
          <Button onClick={this.clearAll}>最近30天</Button>
          <Button onClick={this.clearAll}>本月</Button>
          <Button onClick={this.clearAll}>本年</Button>
          <Space direction="vertical" size={12}>
            <RangePicker />
          </Space>,
        </Space>
        <Space style={{marginBottom: 16}}>
          名称：<Input style={{width:'80%'}} placeholder="input with clear icon" allowClear onChange={onChange} />
          链接：<Input style={{width:'80%'}} placeholder="input with clear icon" allowClear onChange={onChange} />
          IP：<Input style={{width:'80%'}} placeholder="input with clear icon" allowClear onChange={onChange} />
          <Button onClick={this.clearAll}>搜索</Button>
        </Space>
        <Table columns={columns} dataSource={data} onChange={this.handleChange}/>
      </PageContainer>
    );
  }
}

export default SystemLog;
